<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="/scripts/jquery.js"></script>
	</head>
	<body>
		<pre>
      计算属性（在computed中）和方法（在methods中）的区别：

        1. 计算属性基于依赖进行缓存，方法是没有缓存的
        2. 计算属性和方法调用方法有区别，计算属性不需要加括号，但是方法的调用必须加括号
        3. 计算属性和方法的调用也有一个区别，方法一般通过事件调用，计算属性直接当成属性值使用
        4. 计算属性里面的数据一般需要依赖于 data 中的数据，方法里面的逻辑操作一般不需要依赖于 data 中的数据

    </pre>
		<div id="app">
			<div>{{ reverse }}</div>
			<div>{{ reverse }}</div>

			<div>{{ handle() }}</div>
			<div>{{ handle() }}</div>
		</div>

		<script src="scripts/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					info: 'Tom',
					age: 18,
				},
				methods: {
					handle: function () {
						console.log('方法')
						return this.info.split('').reverse().join('')
					},
				},
				// 计算属性需要写到 computed 节点中
				computed: {
					reverse: function () {
						console.log('计算属性')
						return this.info.split('').reverse().join('')
					},
				},
			})
		</script>
	</body>
</html>
